{extend name="index/layout" /}

{block name="canonical"}
    <link rel="canonical" href="https://{$site_domain}/category/{$wallpapers_type_name|rawurlencode}/{$wallpapers_category_name|rawurlencode}/{$wallpapers_title|rawurlencode}">
{/block}

{block name="head"}
{if condition="$wallpapers_noindex == 1"}
    <meta name="robots" content="noindex">
{/if}
{if condition="count($wallpapers) > 1"}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
{/if}
<link rel="stylesheet" href="/static/css/detail.css">
{/block}

{block name="content"}
    <!-- 面包屑导航 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div class="flex items-center text-sm whitespace-nowrap">
            <a href="/" class="text-primary hover:text-accent">首頁</a>
            <i class="fas fa-chevron-right mx-2 text-gray-400"></i>
            <a href="/category/{$wallpapers_type_name|rawurlencode}/" class="text-primary hover:text-accent">{$wallpapers_type_name}</a>
            <i class="fas fa-chevron-right mx-2 text-gray-400"></i>
            <a href="/category/{$wallpapers_type_name|rawurlencode}/{$wallpapers_category_name|rawurlencode}/" class="text-primary hover:text-accent">{$wallpapers_category_name}</a>
            <i class="fas fa-chevron-right mx-2 text-gray-400"></i>
            <span class="text-gray-600 truncate">{$wallpapers_title}</span>
        </div>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 {eq name='wallpapers_type' value='desktop'}desktop-wallpaper{elseif condition="$wallpapers_type eq 'mobile'"}mobile-wallpaper{elseif condition="$wallpapers_type eq 'dynamic_desktop'"}desktop-wallpaper{else}mobile-wallpaper{/eq}" data-wallpaper-type="{$wallpapers_type}">
        <!-- 左侧内容：轮播图 -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow-md p-4">
                <!-- 桌布类型 -->
                <div class="mb-4 flex justify-between items-center">
                    <span class="wallpaper-type-badge {eq name='wallpapers_type' value='desktop'}desktop-theme{elseif condition="$wallpapers_type eq 'mobile'"}mobile-theme{elseif condition="$wallpapers_type eq 'dynamic_desktop'"}dynamic-desktop-theme{else}dynamic-mobile-theme{/eq}">
                        <i class="fas fa-{eq name='wallpapers_type' value='desktop'}desktop{elseif condition="$wallpapers_type eq 'mobile'"}mobile-alt{elseif condition="$wallpapers_type eq 'dynamic_desktop'"}desktop{else}mobile-alt{/eq} {if condition="$wallpapers_type eq 'dynamic_desktop' || $wallpapers_type eq 'dynamic_mobile'"}fa-spin{/if}"></i>
                        {$wallpapers_type_name}
                    </span>
                    <span class="text-sm text-gray-500">適合{$wallpapers_type_name}使用</span>
                </div>
                
                <!-- 主轮播图 -->
                <div class="swiper main-swiper mb-2">
                    <div class="swiper-wrapper">
                        {volist name="wallpapers" id="wallpaper"}
                        <div class="swiper-slide" data-index="{$key}" data-has-video="{$wallpaper.mp4_preview ? 'true' : 'false'}" data-video-url="{$wallpaper.mp4_preview|default=''}">
                            {if condition="$wallpapers_type == 'mobile' || $wallpapers_type == 'dynamic_mobile'"}
                            <!-- 手机边框 -->
                            <div class="mobile-frame-detail-container">
                                <div class="mobile-frame-content">
                                    {if condition="isset($wallpaper.mp4_preview) && $wallpaper.mp4_preview != ''"}
                                    <div class="video-container">
                                        <img src="{$wallpaper.show_file_path}" alt="{$wallpaper.title}" class="rounded-lg" data-video-poster>
                                        <div class="play-button">
                                            <i class="fas fa-play"></i>
                                        </div>
                                        <video class="rounded-lg hidden" controls preload="none" poster="{$wallpaper.show_file_path}">
                                            <source src="{$wallpaper.mp4_preview}" type="video/mp4">
                                            您的浏览器不支持视频播放
                                        </video>
                                    </div>
                                    {else /}
                                    <img src="{$wallpaper.show_file_path}" alt="{$wallpaper.title}" class="rounded-lg">
                                    {/if}
                                </div>
                                <div class="mobile-frame"></div>
                            </div>
                            {else /}
                            <!-- 电脑桌布，直接显示图片/视频 -->
                            {if condition="isset($wallpaper.mp4_preview) && $wallpaper.mp4_preview != ''"}
                            <div class="video-container">
                                <img src="{$wallpaper.show_file_path}" alt="{$wallpaper.title}" class="rounded-lg" data-video-poster>
                                <div class="play-button">
                                    <i class="fas fa-play"></i>
                                </div>
                                <video class="rounded-lg hidden" controls preload="none" poster="{$wallpaper.show_file_path}">
                                    <source src="{$wallpaper.mp4_preview}" type="video/mp4">
                                    您的浏览器不支持视频播放
                                </video>
                            </div>
                            {else /}
                            <img src="{$wallpaper.show_file_path}" alt="{$wallpaper.title}" class="rounded-lg">
                            {/if}
                            {/if}
                        </div>
                        {/volist}
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
                
                <!-- 缩略图轮播 -->
                {if condition="count($wallpapers) > 1"}
                <div class="swiper thumbnail-swiper {eq name='wallpaper.type' value='desktop'}{elseif condition="$wallpaper.type eq 'mobile'"}mobile-theme{elseif condition="$wallpaper.type eq 'dynamic_desktop'"}{else}mobile-theme{/eq}">
                    <div class="swiper-wrapper">
                        {volist name="wallpapers" id="wallpaper"}
                        <div class="swiper-slide">
                            <img src="{$wallpaper.thumbnail}" alt="{$wallpaper.description}" class="h-full w-full object-cover rounded">
                        </div>
                        {/volist}
                    </div>
                </div>
                {/if}
            </div>
        </div>
        
        <!-- 右侧内容：壁纸信息和下载按钮 -->
        <div>
            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                <h1 class="text-2xl font-bold text-{eq name='wallpaper_first.type' value='desktop'}primary{elseif condition="$wallpaper_first.type eq 'mobile'"}accent{elseif condition="$wallpaper_first.type eq 'dynamic_desktop'"}blue-500{else}yellow-600{/eq} mb-4">{$wallpaper_first.title}</h1>
                
                {if condition="$wallpaper_first.description"}
                <div class="mb-4">
                    <h3 class="text-sm font-bold text-gray-500 uppercase mb-2">描述</h3>
                    <p class="text-gray-700">{$wallpaper_first.description}</p>
                </div>
                {/if}
                
                <div class="mb-4">
                    <h3 class="text-sm font-bold text-gray-500 uppercase mb-2">基本信息</h3>
                    <div class="grid grid-cols-2 gap-y-2">
                        <div class="text-gray-600">分類：</div>
                        <div><a href="/category/{$wallpaper_first.type_name|rawurlencode}/{$wallpaper_first.category_info.name|rawurlencode}/" class="text-{eq name='wallpaper_first.type' value='desktop'}primary{elseif condition="$wallpaper_first.type eq 'mobile'"}accent{elseif condition="$wallpaper_first.type eq 'dynamic_desktop'"}blue-500{else}yellow-600{/eq} hover:underline">{$wallpaper_first.category_info.name}</a></div>
                        
                        <div class="text-gray-600">類型：</div>
                        <div class="font-medium"><a href="/category/{$wallpaper_first.type_name|rawurlencode}/">{$wallpaper_first.type_name}</a></div>
                        
                        <div class="text-gray-600">瀏覽次數：</div>
                        <div id="current-view-count">{$wallpaper_first.view_cnt}</div>
                        
                        <div class="text-gray-600">下載次數：</div>
                        <div id="current-download-count">{$wallpaper_first.download_cnt}</div>
                        
                        <div class="text-gray-600">更新時間：</div>
                        <div id="current-update-time">{:date('Y-m-d', strtotime($wallpaper_first.update_time))}</div>
                    </div>
                </div>
                
                <!-- 图片描述 -->
                <div id="image-description-container" class="mb-4 {if empty($wallpapers[0]['description'])}hidden{/if}">
                    <h3 class="text-sm font-bold text-gray-500 uppercase mb-2">圖片描述</h3>
                    <p id="current-image-description" class="text-gray-700">{$wallpapers[0]['description']}</p>
                </div>
                
                {if condition="!empty($tags)"}
                <div class="mb-6">
                    <h3 class="text-sm font-bold text-gray-500 uppercase mb-2">標籤</h3>
                    <div class="flex flex-wrap gap-2 tag-cloud">
                        {volist name="tags" id="tag"}
                        {if $tag != ''}
                        <span>{$tag}</span>
                        {/if}
                        {/volist}
                    </div>
                </div>
                {/if}
                
                <h3 class="text-sm font-bold text-gray-500 uppercase mb-3">下載選項</h3>
                
                <!-- 收藏按钮 -->
                <button id="favorite-btn" class="favorite-btn {eq name='wallpaper.type' value='desktop'}desktop-theme{elseif condition="$wallpaper.type eq 'mobile'"}mobile-theme{elseif condition="$wallpaper.type eq 'dynamic_desktop'"}dynamic-desktop-theme{else}dynamic-mobile-theme{/eq} {if condition="$isFavorited"}favorited{/if} block text-center py-3 px-4 rounded-md w-full cursor-pointer">
                    <i class="{if condition='$isFavorited'}fas{else}far{/if} fa-heart mr-2"></i> <span id="favorite-text">{if condition="$isFavorited"}已收藏{else}加入收藏{/if}</span>
                </button>
                
                <button id="download-btn" class="download-btn <?php echo $wallpaper['type'] == 'desktop' ? 'desktop-theme' : 'mobile-theme'; ?> block text-white text-center py-3 px-4 rounded-md mb-3 w-full cursor-pointer">
                    <i class="fas fa-download mr-2"></i> 下載 
                </button>
                
                <!-- 设备提示 -->
                <div class="mt-4 p-3 bg-gray-100 rounded-md text-sm">
                    <p class="text-gray-700">
                        <i class="fas fa-info-circle mr-2 text-{eq name='wallpaper.type' value='desktop'}primary{elseif condition="$wallpaper.type eq 'mobile'"}accent{elseif condition="$wallpaper.type eq 'dynamic_desktop'"}blue-500{else}yellow-600{/eq}"></i>
                        {eq name='wallpaper.type' value='desktop'}
                        此桌布適合電腦使用，可設定為您的電腦桌面背景。
                        {elseif condition="$wallpaper.type eq 'mobile'"}
                        此桌布適合手機使用，可設定為您的手機鎖屏或桌面背景。
                        {elseif condition="$wallpaper.type eq 'dynamic_desktop'"}
                        此動態桌布適合電腦使用，可設定為您的電腦動態桌面背景。
                        {else}
                        此動態桌布適合手機使用，可設定為您的手機動態鎖屏或桌面背景。
                        {/eq}
                    </p>
                </div>
            </div>
            
            <!-- 相关推荐 -->
            {if condition="!empty($relatedWallpapers)"}
            <div class="bg-white rounded-lg shadow-md p-6">
                <h3 class="text-lg font-bold text-{eq name='wallpaper.type' value='desktop'}primary{elseif condition="$wallpaper.type eq 'mobile'"}accent{elseif condition="$wallpaper.type eq 'dynamic_desktop'"}blue-500{else}yellow-600{/eq} mb-4">相關推薦</h3>
                <div class="grid {eq name='wallpaper.type' value='desktop'}grid-cols-2 gap-4{elseif condition="$wallpaper.type eq 'mobile'"}grid-cols-2 sm:grid-cols-3 gap-3{else}grid-cols-2 sm:grid-cols-3 gap-3{/eq}">
                    {volist name="relatedWallpapers" id="related"}
                    <a href="/category/{:$related.type == 'mobile' ? rawurlencode('手機桌布') : rawurlencode('電腦桌布')}/{$related.category_name|rawurlencode}/{$related.title|rawurlencode}" class="group hover-card">
                        <div class="relative {eq name='related.type' value='desktop'}desktop-card{elseif condition="$related.type eq 'mobile'"}mobile-card{else}mobile-card{/eq} bg-gray-200 rounded overflow-hidden mb-2">
                            <img src="{$related.cover_image}" alt="{$related.title}" class="w-full h-full object-cover lazy" loading="lazy">
                        </div>
                        <h4 class="text-sm font-medium text-{eq name='wallpaper.type' value='desktop'}primary{elseif condition="$wallpaper.type eq 'mobile'"}accent{elseif condition="$wallpaper.type eq 'dynamic_desktop'"}blue-500{else}yellow-600{/eq} truncate group-hover:text-{eq name='wallpaper.type' value='desktop'}secondary{elseif condition="$wallpaper.type eq 'mobile'"}warning{else}warning{/eq}">{$related.title}</h4>
                    </a>
                    {/volist}
                </div>
            </div>
            {/if}
        </div>
    </div>
{/block}

{block name="script"}
<script>
var images = {$wallpapers|json_encode};
    // 当前选中的图片信息
    var currentFilePath = '';
    var currentDescription = '';
    var wallpaperType = "{$wallpapers_type}";
    var isMobile = wallpaperType === "mobile" || wallpaperType === "dynamic_mobile";
    var currentVideoPlaying = null;
    var currentImage = null;
</script>
<script src="/static/js/detail.js?v=3"></script>
{/block} 